import React from "react";
// @ts-ignore
import { Outlet } from "react-router-dom";
import MenuConfig from "../../config"

import * as Icon from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
// 这个是引入所有的图标
// @ts-ignore
import { Layout, Menu, Button, theme } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { selectMenuList } from "../../store/reducers/tab";
// @ts-ignore
const { Header, Sider, Content } = Layout;
//动态获取Icon

const iconToElement = (icon) => {
    return React.createElement(Icon[icon])
    // 这里的是动态的react组件,，映射得到对应的图标
}
const CommonAside = ({ collapsed }) => {
    //得到store中的菜单列表
    let menuList = useSelector(state => state.tab.menuList)
    //处理菜单的数据,没有子菜单
    if (menuList.length === 0) {


        const menuDataString = localStorage.getItem("menu")

        // 检查是否获取到了数据，并尝试解析 JSON 字符串
        if (menuDataString) {
            try {
                // 解析 JSON 字符串为 JavaScript 对象
                 menuList = JSON.parse(menuDataString);
                console.log(menuList); // 这应该显示正确的对象或数组结构
            } catch (error) {
                console.error("解析错误:", error);
            }
        }


    }
    const items = menuList.map((icon) => {
        const child = {
            key: icon.path,
            icon: iconToElement(icon.icon),
            label: icon.label

        }
        //有子菜单
        if (icon.children) {
            child.children = icon.children.map((item) => {
                return {
                    key: item.path,
                    icon: iconToElement(item.icon),
                    label: item.label
                }
            })
        }
        return child;
    })



    const dispatch = useDispatch()
    const navigate = useNavigate()
    //点击菜单进行跳转
    //添加数据到store方法中
    const setTabList = (value) => {
        dispatch(selectMenuList(value))

    }
    const selectMenu = (e) => {
        let data;
        MenuConfig.forEach((item) => {
            //找到当前的数据
            if (item.path === e.keyPath[e.keyPath.length - 1]) {
                //得到最后一个元素
                data = item;
                //如果有二级菜单
                if (e.keyPath.length > 1) {
                    //有二级菜单
                    data = item.children?.find((item) => {
                        //find方法返回符合条件的数组元素
                        return item.path == e.key
                    })


                }
            }

        })
        setTabList({
            // @ts-ignore
            path: data.path,
            // @ts-ignore
            name: data.name,
            // @ts-ignore
            label: data.label




        })
        navigate(e.key)
        console.log(e, 'e')
    }
    console.log(collapsed, 'collapsed')
    return (
        <Sider trigger={null} collapsible collapsed={collapsed} >
            <h3 className="app-name"> {collapsed ? '后台' : '通用后台管理系统'}</h3>
            <Menu
                theme="dark"
                mode="inline"

                defaultSelectedKeys={['1']}

                items={items}
                style={{
                    height: '100%',

                }}

                // @ts-ignore
                onClick={selectMenu}
            />
        </Sider>
    )
}
export default CommonAside;